import React, {PropsWithChildren, useEffect, useState} from 'react'
import styles from "./MyNavigationBar.module.sass"
import {NavBar} from "@nutui/nutui-react-taro";
import {ArrowLeft} from "@nutui/icons-react-taro";
import Taro, {useReady} from "@tarojs/taro";
import {Text, View} from "@tarojs/components";

export interface MyNavigationBarProps extends PropsWithChildren {
}

const MyNavigationBar: React.FC<MyNavigationBarProps> = ({children}) => {
    let statusBarHeight = useStatusBarHeight();
    const [showBackButton, setShowBackButton] = useState(false)
    useReady(() => {

        let currentPages = Taro.getCurrentPages();
        setShowBackButton(currentPages.length > 1)
    })
    return <>
        <View className={styles.container} style={{zIndex: 10}}>
            <View style={{height: statusBarHeight + 'px', width: "100%"}}/>
            <NavBar style={{backgroundColor: "transparent", marginBottom: 0,}} onBackClick={showBackButton ? () => {
                Taro.navigateBack()
            } : undefined} back={showBackButton ? <>
                <ArrowLeft size={14}/>
            </> : undefined}>
                {typeof children === "string" ?
                    <Text maxLines={1} numberOfLines={1} overflow={"ellipsis"} className={styles.textTitle}>{children}</Text> : children}
            </NavBar>
        </View>
        <View style={{width: "100vw", height: (statusBarHeight + 44) + "px",}}/>
    </>
}

export function useMyNavigationBarHeight() {
    const [navigationBarHeight, setNavigationBarHeight] = useState<number>()
    useEffect(() => {
        setNavigationBarHeight((Taro.getSystemInfoSync().statusBarHeight ?? 8) + 44)
    }, [])
    return navigationBarHeight
}

export function useStatusBarHeight() {
    const [statusBarHeight, setStatusBarHeight] = useState(8)
    useEffect(() => {
        let systemInfoSync = Taro.getSystemInfoSync();
        setStatusBarHeight(systemInfoSync.statusBarHeight ?? 8)
    }, []);

    return statusBarHeight
}

export default MyNavigationBar


